<template>
  <header class="statistic" tabindex="-1" ref="questionDom">
    <!-- 单选题 -->
    <div class="question-add-body-content-question">
      <div class="question-add-body-content-question-div">
        <span class="question" :style="isQuestionShowStyle">
          <span>问题</span>
          <span class="questionNum">{{ num }}</span>
        </span>
      </div>

      <el-input
        v-model="mainTitle"
        class="title titleInput"
        :disabled="isDisabled"
        :style="inputStyle"
      ></el-input>
      <div class="radio" :id="num"></div>
    </div>
  </header>
</template>

<script>
//引入的请求
import { statisticalQuestion } from '@/api/question/index.js'
import $ from 'jquery'
export default {
  name: 'Statistic',
  data() {
    return {
      radio: '',
      inputStyle: '',
    }
  },
  beforeMount() {
<<<<<<< HEAD
    this.statistical()
=======
<<<<<<< HEAD
    this.statistical()
=======
    let echarts = require('echarts')
    //! 用来计算占百分比的变量
    let total = 17 + 28 + 85 + 58
    //! 用来设置最大的值
    let max = 85
    //! 选项值
    let options = []
    // this.radioNum.forEach((item, index) => {
    // console.log(item, 'qaqqa')
    // options.splice(options.length,0,[`${String.fromCharCode(65+index)}()`])
    // statisticalQuestion(this.queId).then((res) => {
    //   console.log(res)
    // })
    // })

    this.$nextTick(function () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('radio'))
      // 绘制图表
      myChart.setOption({
        dataset: {
          source: [
            ['D(不满意)', 17],
            ['C(基本满意)', 28],
            ['B(满意)', 85],
            ['A(很满意)', 58],
          ],
        },
        grid: {
          containLabel: true,
          top: '10px',
          left: '0px',
          right: '10px',
          bottom: '5px',
          backgroundColor: '#fff',
          width: 'auto', //图例宽度
          height: 'auto', //图例高度
        },
        xAxis: {
          name: 'x轴',
          axisTick: {
            show: false, //是否展示字段线
          },
          axisLine: {
            show: false, //是否展示 x轴 线
          },
          max(value) {
            //设置 x轴 最大长度
            return (
              parseInt(value.max.toString().substring(0, 1)) *
                ((value.max + '').length - 1) *
                10 +
              20
            )
          },
        },
        yAxis: {
          name: 'y轴',
          type: 'category',
          axisTick: {
            show: false, //是否展示字段线
          },
          axisLine: {
            show: false, //是否展示 y轴 线
          },
          // axisLabel: {
          //   show: true,
          //   formatter(parms) {
          //     console.log(parms)
          //     return `test`
          //   },
          // },
        },
        series: [
          {
            type: 'bar', //统计图为柱状图
            barGap: 1, //柱状之间的间隔
            barWidth: '18', //柱状的宽度
            itemStyle: {
              color(parms) {
                if (parms.value[1] === max) {
                  return '#E53F3F'
                } else {
                  return '#73DEB3'
                }
              },
            },
            label: {
              //柱状上的标签展示
              show: true,
              position: 'right',
              distance: 2,
              formatter(parms) {
                return `${parms.value[1]}（${(
                  (parms.value[1] / total) *
                  100
                ).toFixed(0)}%）`
              },
              color: 'auto',
            },
          },
        ],
      })
    })
>>>>>>> 06692b61b95de0275020019248430399d264679e
>>>>>>> c12574b6f3b37dc7ea4822ed193ff5025f947b93
  },

  props: {
    //问卷题目标题
    mainTitle: {
      type: String,
    },
    //问卷序号
    num: {
      type: Number,
    },
    //问卷的题目数
    radioNum: {
      type: Array,
    },
    //是否能被修改
    isDisabled: {
      type: Boolean,
    },
    //是否显示序号
    isQuestionShowStyle: {
      type: String,
    },
    //是否必答题
    isRequired: {
      type: Number,
    },
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> c12574b6f3b37dc7ea4822ed193ff5025f947b93
    //主表id
    queId: {
      type: String,
    },
    //info 表 id
    infoId: {
      type: String,
    },
    //统计的人数
    statisticCount: {
      type: Number,
    },
  },
  methods: {
    //! 统计表方法
    statistical() {
      statisticalQuestion(this.queId).then((res) => {
        console.log(res)
        let source = []

        this.radioNum.forEach((optionValue, index) => {
          //!
          source.splice(0, 0, [
            `${String.fromCharCode(65 + index)}(${optionValue})`,
            res.data[`${this.infoId}`][`${optionValue}`],
          ])

          this.histogram(
            source,
            res.data[`${this.infoId}`].max,
            res.data[`${this.infoId}`].total
          )
        })
      })
    },

    //! 柱状图
    /**
     * [
              ['D(不满意)', 17],
              ['C(基本满意)', 28],
              ['B(满意)', 85],
              ['A(很满意)', 58],
            ]
     */
    histogram(source, maxCount, totalCount) {
      let echarts = require('echarts')
      //! 用来计算占百分比的变量
      let total = totalCount
      //! 用来设置最大的值
      let max = maxCount

      this.$nextTick(function () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(`${this.num}`))
        // 绘制图表
        myChart.setOption({
          dataset: {
            source: source,
          },
          grid: {
            containLabel: true,
            top: '10px',
            left: '0px',
            right: '10px',
            bottom: '5px',
            backgroundColor: '#fff',
            width: 'auto', //图例宽度
            height: 'auto', //图例高度
          },
          xAxis: {
            name: 'x轴',
            axisTick: {
              show: false, //是否展示字段线
            },
            axisLine: {
              show: false, //是否展示 x轴 线
            },
            max(value) {
              //设置 x轴 最大长度
              return (
                parseInt(value.max.toString().substring(0, 1)) *
                  ((value.max + '').length - 1) *
                  10 +
                20
              )
            },
          },
          yAxis: {
            name: 'y轴',
            type: 'category',
            axisTick: {
              show: false, //是否展示字段线
            },
            axisLine: {
              show: false, //是否展示 y轴 线
            },
          },
          series: [
            {
              type: 'bar', //统计图为柱状图
              barGap: 1, //柱状之间的间隔
              barWidth: '18', //柱状的宽度
              itemStyle: {
                color(parms) {
                  if (parms.value[1] === max) {
                    return '#E53F3F'
                  } else {
                    return '#73DEB3'
                  }
                },
              },
              label: {
                //柱状上的标签展示
                show: true,
                position: 'right',
                distance: 2,
                formatter(parms) {
                  return `${parms.value[1]}（${(
                    (parms.value[1] / total) *
                    100
                  ).toFixed(0)}%）`
                },
                color: 'auto',
              },
            },
          ],
        })
      })
    },
<<<<<<< HEAD
=======
=======
    //问卷id
    queId: {
      type: String,
    },
>>>>>>> 06692b61b95de0275020019248430399d264679e
>>>>>>> c12574b6f3b37dc7ea4822ed193ff5025f947b93
  },
}
</script>

<style scoped>
.statistic {
  margin-right: 60px;
  margin-bottom: 40px;
  width: 440px;
  height: 297px;
  border: 2px solid lightgrey;
  border-radius: 5px;
  outline: none;
}

/*

 */
.question-add-body-content-question {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* border: 2px solid lightgrey;
  border-radius: 5px; */
  /* display: inline-block; */
  /* line-height: 280px; */
  /* text-align: center; */
  /* margin: autos; */
}
.question-add-body-content-question::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.question-add-body-content-question::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #535353;
}
.question-add-body-content-question::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ededed;
}

.question-add-body-content-question-div {
  width: 405px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  margin: auto;
  /* border: 1px solid; */
  font-size: 18.5px;
  position: relative;
}
.question-add-body-content-question-div .el-icon-remove-outline {
  color: red;
  font-weight: bold;
  position: absolute;
  right: 1px;
  top: 16px;
}
.question-add-body-content-question .title {
  width: 395px;
  margin-left: 20px;
  border: 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
  font-size: 15px;
  font-weight: normal;
}
.question-add-body-content-question .title-tag {
  margin-top: 10px;
  margin-left: 20px;
}
</style>

<style scoped>
.radio {
  display: block;
  width: 420px;
  height: 195px;
  /* border: 1px solid lightgrey; */
  border-radius: 5px;
  outline: none;
  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px; */
  /* margin: auto; */
  margin-top: 10px;
  /* margin-left: 20px; */
  line-height: 35.99px;
  position: relative;
  /* overflow: auto; */
}
.label-radio {
  display: inline-block;
  width: 385px;
  height: 35.99px;
  border: 0px;
}

.label-radio {
  font-size: 17px;
  font-weight: normal;
}
</style>
<style>
.radioQuestion .el-radio__inner {
  border: 1px solid grey;
  margin-left: 5px;
}
.radioQuestion .el-tag__close {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>

